<template>
  <a-layout>
    <a-layout-sider
      :style="{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
      }"
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      has-sider
    >
      <div class="logo" />
      <a-menu
        @click="clickMenu"
        v-model:selectedKeys="getActiveMenu"
        v-model:openKeys="openKeys"
        theme="dark"
        mode="inline"
      >
        <a-sub-menu key="/dashboard">
          <template #title>dashboard</template>
          <a-menu-item key="/dashboard/analysis" title="分析页">
            <user-outlined />
            <span>分析页</span>
          </a-menu-item>
          <!--          <a-menu-item key="/dashboard/analysis" title="恐怖告知他">-->
          <!--            <user-outlined />-->
          <!--            <span>分析页</span>-->
          <!--          </a-menu-item>-->
        </a-sub-menu>
        <a-sub-menu key="sys">
          <template #title>系统管理</template>
          <a-menu-item key="/sys/address" title="地址管理">
            <user-outlined />
            <span>地址管理</span>
          </a-menu-item>
          <a-menu-item key="/sys/user" title="系统用户">
            <user-outlined />
            <span>系统用户</span>
          </a-menu-item>
          <a-menu-item key="/sys/dept" title="部门管理">
            <user-outlined />
            <span>部门管理</span>
          </a-menu-item>
          <a-menu-item key="/sys/role" title="角色管理">
            <user-outlined />
            <span>角色管理</span>
          </a-menu-item>
          <a-menu-item key="/sys/menu" title="菜单管理">
            <user-outlined />
            <span>菜单管理</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout style="margin-left: 200px">
      <a-layout-header style="background: #fff">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <tabs></tabs>
      <a-layout-content
        :style="{
          margin: '24px 16px 0',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <KeepAlive :include="activeTab" :max="20">
              <component :is="Component" />
            </KeepAlive>
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from "ant-design-vue";
import { computed, onBeforeMount, ref } from "vue";
import { type RouteRecord, useRoute, useRouter } from "vue-router";
import Tabs from "@/component/tabs/tabs.vue";
import { useTabsStore } from "@/stores/tabs";
import { useMenuStore } from "@/stores/useMenu";
import { storeToRefs } from "pinia";
import { Client } from "@/api/clientApi";
import { useUserStore } from "@/stores/useUser";
const router = useRouter();
let route = useRoute();
const tabsStore = useTabsStore();
const menuStore = useMenuStore();
const userStore = useUserStore();
const { getActiveMenu } = storeToRefs(menuStore);
/**
 * 菜单点击
 * @param e
 */
const clickMenu: MenuProps["onClick"] = (e) => {
  router.push(e.key as string);
  tabsStore.addTab({ title: e.item.title as string, id: e.key as string });
};
const openKeys = ref<string[]>(["sys"]);
const collapsed = ref<boolean>(false);

const activeTab = computed(() => {
  let tabs = tabsStore.getTabs;
  return tabs.map((e) => {
    let routerName = e.id.split("/");
    let componentName = routerName[routerName.length - 1];
    return componentName;
  });
});

onBeforeMount(() => {
  // 在页面第一次加载的时候判断页面是否有tab
  const path = route.path;
  //根据路由递归查询出全部的菜单
  // todo 重做路由类型
  let routes: RouteRecord[] = router.getRoutes();
  let menu: any[] = [];
  const getMenus = (routes: any[]) => {
    routes.forEach((e) => {
      if (e.meta && e.meta.title) {
        menu.push(e);
      }
      // 如果是固定的菜单就添加到tab
      if (e.meta && e.meta.fixed) {
        tabsStore.addTab({
          title: e.meta.title as string,
          id: e.path,
          fixed: true,
        });
      }
      if (e.children) {
        getMenus(e.children);
      }
    });
  };
  getMenus(routes);
  let currentMenu = menu.find((e) => e.path === path);
  if (currentMenu) {
    tabsStore.addTab({
      title: currentMenu.meta.title as string,
      id: currentMenu.path,
    });
  }
  // 按照是否有固定的属性来排序,固定的在前面
  let sort = tabsStore.getTabs.sort((a, b) => {
    if (a.fixed && !b.fixed) {
      return -1;
    } else if (!a.fixed && b.fixed) {
      return 1;
    } else {
      return 0;
    }
  });
  // 重新设置tab
  tabsStore.setTabs(sort);
});
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 130ms ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
